<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { getMessageAPI } from '@/services/message'
import { useMessageStore } from '@/stores'
import { ref } from 'vue'
import { useGetDictData } from '@/composables'

const detail = ref({})

const getDetail = async (id) => {
  const res = await getMessageAPI(id)
  if (res.code === 200) {
    detail.value = res.data
  }
}

const messageStore = useMessageStore()
const { setMessageRead } = messageStore

const dictDataSource = ref({})

onLoad(async ({ key }) => {
  dictDataSource.value = await useGetDictData('message_channel')
  if (key) {
    await Promise.all([getDetail(key), setMessageRead(key)])
  }
})
</script>

<template>
  <view class="viewport">
    <uni-card spacing="0" :is-shadow="false">
      <view class="title p-20">
        <view class="title-label">{{ detail?.title }}</view>
        <view class="subtitle mt-20">{{ detail?.createTime }}</view>
      </view>
    </uni-card>
    <uni-card spacing="0" :is-shadow="false">
      <template #title>
        <view class="p-20">
          <view class="flex items-center" style="font-size: 24rpx; font-weight: 700">
            <image
              class="icon-image mr-10"
              src="@/static/icons/msg-warning.png"
              mode="scaleToFill"
            />
            消息内容
          </view>
          <view class="subtitle mt-20">{{ detail?.messageContent }}</view>
        </view>
      </template>
      <image class="content-image" src="@/static/test.png" mode="scaleToFill" />
    </uni-card>
    <uni-card spacing="0" :is-shadow="false">
      <view class="flex justify-between items-center" style="font-size: 24rpx">
        <view>消息通道</view>
        <view style="color: #007aff">
          <view v-for="item in dictDataSource.message_channel" :key="item.value">
            <template v-if="item.value === String(detail.messageChannel)">
              {{ item.label }}
            </template>
          </view>
        </view>
      </view>
    </uni-card>
  </view>
</template>

<style scoped lang="scss">
.viewport {
  .title {
    font-size: 48rpx;
    color: #000;
  }

  .subtitle {
    font-size: 24rpx;
    color: #999;
    font-weight: 400;
  }
  .icon-image {
    width: 32rpx;
    height: 32rpx;
  }
  .content-image {
    width: 100%;
    height: 360rpx;
  }
}
</style>
